<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>v-on 语法</h2>
        <!-- v-on 完整写法 -->
        <button v-on:click="showInfo">click me</button>
        <!-- v-on 简写形式 -->
        <button @click="showInfo">click me</button>

        <hr />

        <h2>v-on 传参</h2>
        <button @click="showParam1(123)">click me</button>
        <button @click="showParam2(123, $event)">click me</button>
        <button @click="showParam3($event, 123)">click me</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                showInfo(event) {
                    console.log('event:', event)
                    console.log('this:', this)
                    console.log('this === vm:', this === vm)
                },
                showParam1(number) {
                    console.log('number:', number)
                },
                showParam2(number, event) {
                    console.log('number:', number)
                    console.log('event:', event)
                },
                showParam3(event, number) {
                    console.log('event:', event)
                    console.log('number:', number)
                }
            }
        })
    </script>

</body>
</html>